<template>
  <a-modal
    :visible="visible"
    :title="title"
    :confirm-loading="submitLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <a-form
      :ref="setFormRef"
      :model="formState"
      :rules="formRules"
    >
      <template v-if="formItems && formItems.length">
        <!-- 动态渲染表单项 -->
        <template v-for="(item, index) in formItems" :key="index">
          <a-form-item :name="item.name" :label="item.label">
            <!-- 根据组件类型动态渲染 -->
            <component
              :is="item.component"
              v-bind="item.props || {}"
              :value="formState[item.name]"
              @update:value="updateFormValue(item.name, $event)"
              :checked="item.component === 'a-switch' ? formState[item.name] : undefined"
              @update:checked="item.component === 'a-switch' ? updateFormValue(item.name, $event) : null"
            />
          </a-form-item>
        </template>
      </template>
      
      <!-- 默认表单项，用于不传递formItems的情况 -->
      <template v-else>
        <slot name="default">
          <!-- 可以在这里放默认的表单项 -->
        </slot>
      </template>
    </a-form>
  </a-modal>
</template>

<script setup>
import { ref, watch, defineProps, defineEmits } from 'vue';

// 定义props
const props = defineProps({
  // 模态框可见性
  visible: {
    type: Boolean,
    default: false
  },
  // 模态框标题
  title: {
    type: String,
    default: '表单'
  },
  // 表单数据
  formState: {
    type: Object,
    required: true
  },
  // 表单验证规则
  formRules: {
    type: Object,
    default: () => ({})
  },
  // 表单项配置，用于动态渲染表单
  formItems: {
    type: Array,
    default: () => []
  },
  // 提交加载状态
  submitLoading: {
    type: Boolean,
    default: false
  }
});

// 定义emits
const emit = defineEmits([
  'update:visible',
  'submit',
  'cancel',
  'update:formState'
]);

// 表单引用
const formRef = ref(null);

// 设置表单引用方法（用于ref回调）
const setFormRef = (el) => {
  formRef.value = el;
};

// 更新表单值的方法
const updateFormValue = (key, value) => {
  if (props.formState) {
    // 创建一个新的表单状态对象
    const newFormState = { ...props.formState, [key]: value };
    // 触发更新事件
    emit('update:formState', newFormState);
  }
};

// 处理提交
const handleSubmit = async () => {
  if (!formRef.value) return;
  
  try {
    // 表单验证
    await formRef.value.validate();
    
    // 触发提交事件，传递表单数据
    emit('submit', { ...props.formState });
  } catch (error) {
    console.error('表单验证失败:', error);
  }
};

// 处理取消
const handleCancel = () => {
  // 触发取消事件
  emit('cancel');
  
  // 更新visible状态
  emit('update:visible', false);
};

// 监听visible变化
watch(() => props.visible, (newValue) => {
  if (!newValue) {
    // 模态框关闭后，可以在这里添加清理逻辑
  }
});
</script>

<style scoped>
/* 可以在这里添加组件样式 */
</style> 